<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.endSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button type="primary" size="mini" @click="exportExcel()">导出</el-button>
      </div>
    </div>
    <div class="box-style" id="lineImg">
      <div class="top">
        <ad-table :data="waitList" u-table @sort-change="waitSortInitList"
                  :data-changes-scroll-top="waitIsScrollTop" :show-summary="waitSummary"
                  v-loading="waitInitLoading" @table-body-scroll="waitGetMoreList"
                  :searchQuery="waitSearchQuery" @search="waitGetInitList" @filter-change="waitFilterInitList"
                  :height="tableHeight" @cell-click="cellClick">
          <ad-table-column  label="序号" type="index" ctype="index" fixed/>
          <ad-table-column  label="订单号"  prop="orderSubNo" fixed="left" ctype="urgent" searchable href="/order/detail"
                           id="orderId"/>
<!--          <ad-table-column label="类型" prop="orderSubNo" width="50">-->
<!--            <template slot-scope="{row}">-->
<!--              <span v-if="row.hasOnlinePay == 1" class="icon-urgent" style="background: green; color: white">线</span>-->
<!--              <span v-else-if="row.hasTransferVoucher == 1" class="icon-urgent">凭</span>-->
<!--              <span v-else>-</span>-->
<!--            </template>-->
<!--          </ad-table-column>-->
          <ad-table-column label="制单人" prop="createUserName" w="3c2f" searchable sortable/>
          <ad-table-column label="制单时间" prop="createTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" w="3c2f" searchable/>
          <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" w="3c2f"
                           searchable/>
          <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
          <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
          <ad-table-column label="付款方式" prop="paymentType" w="3c2f" dictName="payment_type" filterable/>
          <ad-table-column label="总运费" prop="totalFee" w="3c2f" sortable/>
          <ad-table-column label="已收合计" prop="totalCollectionHas" w="3c2f" sortable/>
          <ad-table-column label="未收合计" prop="totalCollectionUn" w="3c2f" sortable>
            <template slot-scope="{row}"><span class="un-red">{{row.totalCollectionUn}}</span></template>
          </ad-table-column>
<!--          <u-table-column label="现付" align="center">-->
          <u-table-column
            prop=""
            label="应收"
            width="150">
            <template slot-scope="{row}">
              <el-tooltip effect="dark" placement="right-start">
                <div
                  :style="Number(row.spotNeed) != 0 ? 'cursor:default' : 'cursor:default'">
                  现付:{{row.spotNeed == null ? '－' : row.spotNeed}}
                  <span
                    style="margin-left: 10px"
                    :style="Number(row.deliveryNeed) != 0 ? 'cursor:default' : 'cursor:default'">
               到付:{{row.deliveryNeed == null ? '－' : row.deliveryNeed}}
              </span>
                  <div
                    style="margin-top: 10px"
                    :style="Number(row.backNeed) != 0 ? 'cursor:default' : 'cursor:default'">
                    欠付:{{row.backNeed == null ? '－' : row.backNeed}}
                    <span
                      style="margin-left: 10px"
                      :style="Number(row.slotNeed) != 0 ? 'cursor:default' : 'cursor:default'">
                月付:{{row.slotNeed == null ? '－' : row.slotNeed}}
              </span>
                  </div>

                </div>

                <div slot="content" class="fee-tips">
                  <div>结算人：{{row.spotSettlementName}}</div>
                  <div>联系方式：{{row.spotSettlementPhone}}</div>
                </div>
              </el-tooltip>
            </template>
          </u-table-column>
            <u-table-column
                prop=""
                label="已收"
                width="150">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <div
                  :style="Number(row.spotHas) != 0 ? 'cursor:default' : 'cursor:default'">
                现付:{{row.spotHas == null ? '－' : row.spotHas}}
                   <span
                     style="margin-left: 10px"
                     :style="Number(row.deliveryHas) != 0 ? 'cursor:default' : 'cursor:default'">
               到付:{{row.deliveryHas == null ? '－' : row.deliveryHas}}
              </span>
                <div
                  style="margin-top: 10px"
                  :style="Number(row.backHas) != 0 ? 'cursor:default' : 'cursor:default'">
                欠付:{{row.backHas == null ? '－' : row.backHas}}
                  <span
                    style="margin-left: 10px"
                    :style="Number(row.slotHas) != 0 ? 'cursor:default' : 'cursor:default'">
                月付:{{row.slotHas == null ? '－' : row.slotHas}}
              </span>
              </div>

              </div>

                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.spotSettlementName}}</div>
                    <div>联系方式：{{row.spotSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop=""
                label="未收"
                width="150">
              <template slot-scope="{row}">
<!--                <el-tooltip effect="dark" placement="right-start">-->
                <div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                  <el-tooltip effect="dark" placement="right-start">
                  <div
                    style="width: 60px;margin-bottom: 5px"
                    @click.stop="clickSpotUn(row)"
                    :class="{'un-red': row.spotUn && Number(row.spotUn) != 0}"
                    :style="Number(row.spotUn) != 0 && !!row.spotSettlementName ? 'cursor:pointer' : 'cursor:default'">
                    现付:{{row.spotUn == null ? '－' : row.spotUn}}
                  </div>
                   <div slot="content" class="fee-tips">
                        <div>结算人：{{row.spotSettlementName}}</div>
                        <div>联系方式：{{row.spotSettlementPhone}}</div>
                  </div>
                  </el-tooltip>
                  <el-tooltip effect="dark" placement="right-start">
                <div
                  style="width: 60px;margin-bottom: 5px"
                  @click.stop="clickDeliveryUn(row)"
                  :class="{'un-red': row.deliveryUn && Number(row.deliveryUn) != 0}"
                  :style="Number(row.deliveryUn) != 0 ? 'cursor:pointer' : 'cursor:default'">
                  到付:{{row.deliveryUn == null ? '－' : row.deliveryUn}}</div>
                    <div slot="content" class="fee-tips">
                      <div>结算人：{{row.deliverySettlementName}}</div>
                      <div>联系方式：{{row.deliverySettlementPhone}}</div>
                    </div>
                  </el-tooltip>
                  <el-tooltip effect="dark" placement="right-start">
                <div
                  style="width: 60px;margin-top: 5px"
                    @click.stop="clickBackUn(row)"
                    :class="{'un-red': row.backUn && Number(row.backUn) != 0}"
                    :style="Number(row.backUn) != 0 ? 'cursor:pointer' : 'cursor:default'">
                  欠付:{{row.backUn == null ? '－' : row.backUn}}</div>
                    <div slot="content" class="fee-tips">
                      <div>结算人：{{row.deliverySettlementName}}</div>
                      <div>联系方式：{{row.deliverySettlementPhone}}</div>
                    </div>
                  </el-tooltip>
                  <el-tooltip effect="dark" placement="right-start">
                  <div
                    style="width: 60px;margin-top: 5px"
                    @click.stop="clickSlotUn(row)"
                    :class="{'un-red': row.slotUn && Number(row.slotUn) != 0}"
                    :style="Number(row.slotUn) != 0 ? 'cursor:pointer' : 'cursor:default'">
                    月付:{{row.slotUn == null ? '－' : row.slotUn}}</div>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.deliverySettlementName}}</div>
                    <div>联系方式：{{row.deliverySettlementPhone}}</div>
                  </div>
                  </el-tooltip>
<!--                  <div slot="content" class="fee-tips">-->
<!--                    <div>结算人：{{row.spotSettlementName}}</div>-->
<!--                    <div>联系方式：{{row.spotSettlementPhone}}</div>-->
<!--                  </div>-->
<!--                </el-tooltip>-->
                </div>
              </template>
            </u-table-column>
<!--          </u-table-column>-->
<!--     <u-table-column label="到付" align="center">
            <u-table-column
                prop="deliveryHas"
                sortable
                label="已收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.deliveryHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.deliveryHas == null ? '－' : row.deliveryHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.deliverySettlementName}}</div>
                    <div>联系方式：{{row.deliverySettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop="deliveryUn"
                sortable
                label="未收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': row.deliveryUn && Number(row.deliveryUn) != 0}"
                    :style="Number(row.deliveryUn) != 0 && !!row.deliverySettlementName ? 'cursor:pointer' : 'cursor:default'">
                {{row.deliveryUn == null ? '－' : row.deliveryUn}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.deliverySettlementName}}</div>
                    <div>联系方式：{{row.deliverySettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="欠付" align="center">
            <u-table-column
                prop="backHas"
                sortable
                label="已收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.backHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.backHas == null ? '－' : row.backHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.backSettlementName}}</div>
                    <div>联系方式：{{row.backSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop="backUn"
                sortable
                label="未收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': row.backUn && Number(row.backUn != 0)}"
                    :style="Number(row.backUn) != 0 && !!row.backSettlementName ? 'cursor:pointer' : 'cursor:default'">
                {{row.backUn == null ? '－' : row.backUn}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.backSettlementName}}</div>
                    <div>联系方式：{{row.backSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="月付" align="center">
            <u-table-column
                prop="slotHas"
                sortable
                label="已收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.slotHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.slotHas == null ? '－' : row.slotHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.slotSettlementName}}</div>
                    <div>联系方式：{{row.slotSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop="slotUn"
                sortable
                label="未收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :class="{'un-red': row.slotUn && Number(row.slotUn) != 0}"
                  :style="row.slotUn != 0 && !!row.slotSettlementName ? 'cursor:pointer' : 'cursor:default'">
                {{row.slotUn == null ? '－' : row.slotUn}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.slotSettlementName}}</div>
                    <div>联系方式：{{row.slotSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>-->
          <ad-table-column label="订单状态" prop="orderStatus" w="3c2f" dictName="order_status" filterable/>
          <ad-table-column label="公司名" prop="companyName" w="3c2f" searchable/>
          <ad-table-column label="客户" prop="linkmanName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="linkmanPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="收货人" prop="consigneeName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="consigneePhone" ctype="phone-2f" searchable/>
          <ad-table-column label="订单备注" prop="orderRemark" ctype="remark"/>
        </ad-table>
      </div>


<!--      <el-drawer-->
<!--        size="36%"-->
<!--        :visible.sync="drawer"-->
<!--        direction="btt"-->
<!--        :with-header="false">-->
      <el-dialog
        title="提示"
        :visible.sync="drawer"
        width="95%">
      <div id="bottom" class="bottom" style="min-height: 290px">
        <div class="title-bar" v-if="showBottom"
             style="height:36px;"></div>
        <div v-if="showBottom"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>
        <div v-else>
          <div class="content">
            <div class="left" style="width: 500px">
              <div class="form-wrapper assign" style="position: relative">
                <h3 style="height: 34px;">结算操作</h3>
                <div style="position: absolute;right:12px;top:3px">
                  <el-button size="mini" :disabled="!deliverForm.type" type="primary" plain @click="save">保存</el-button>
                </div>
                <div class="scroll-y"
                     :style="{'display': 'inline-block','height':leftHeight,'overflow-x':'hidden','overflow-y':'auto'}">
                  <el-descriptions :column="2" border size="mini">
                    <el-descriptions-item :span="2" label="收款类型">
                      <value :model="deliverForm" prop="type" dictName="finance_type"
                             style="display: inline-block;"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="结算人">
                      <value :model="deliverForm" prop="deliverySettlementName"
                             style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="结算电话">
                      <value :model="deliverForm" prop="deliverySettlementPhone"
                             style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="未收金额">
                      <value :model="deliverForm" prop="uncollected" style="display: inline-block;width:90px"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="实收金额">
                      <el-input-number v-if="deliverForm.type" :controls="false" style="margin: -5px 0;width:160px"
                                       :disabled="!deliverForm.type" size="mini"
                                       v-model="deliverForm.settlementFee"/>
                      <value v-else :model="deliverForm" prop="settlementFee" style="display: inline-block;width:90px"/>
                    </el-descriptions-item>

                    <el-descriptions-item label="渠道">
                      <ad-status-select v-if="deliverForm.type" style="margin: -5px 0;width: 150px" size="mini"
                                        :disabled="!deliverForm.type"
                                        v-model="deliverForm.channel" :dict="dict.finance_channel"/>
                      <value v-else :model="deliverForm" prop="channel"
                             style="display: inline-block;width:90px" dictName="finance_channel"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="结算时间">
                      <el-date-picker
                          v-if="deliverForm.type"
                          v-model="deliverForm.settlementTime"
                          type="datetime"
                          size="mini"
                          :disabled="!deliverForm.type"
                          style="width: 160px;margin: -5px 0;"
                          value-format="timestamp" format="yyyy-MM-dd HH:mm"
                          placeholder="选择时间">
                      </el-date-picker>
                      <value v-else :model="deliverForm" prop="settlementTime" style="display: inline-block;width:90px"
                             type="datetime"/>
                    </el-descriptions-item>

                    <el-descriptions-item label="付款凭证" :span="2">
                      <ad-upload v-show="deliverForm.type" :disabled="!deliverForm.type"
                                 multiple @input="getImgUrl" ref="proimg"/>
                      <div v-show="!deliverForm.type" class="noImg">
                        暂无图片
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="备注" :span="2">
                      <el-input v-if="deliverForm.type" style="margin: -5px 0;" :disabled="!deliverForm.type"
                                size="mini" maxLength="100"
                                v-model="deliverForm.remark"/>
                      <value v-else :model="deliverForm" prop="remark"/>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>
            <div class="middle" style="flex-shrink: 0;display: inline-block">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>结算记录</h3>
              </div>
              <ad-table ref="plTable" id="editTable" class="editTable" @cell-click="cellClickBottom"
                        :data="deliverTableData" u-table
                        :height="bottomTabHeight">
                <!--                <ad-table-column label="序号" type="index" ctype="index" width="50"/>-->
                <ad-table-column operation width="50" :operates="operates"/>
                <ad-table-column label="操作人" prop="createUser" width="100"/>
<!--                <ad-table-column label="操作时间" prop="createTime" width="130" ctype="datetime"/>-->
                <ad-table-column label="结算时间" prop="settlementTime" width="130" ctype="datetime"/>
                <ad-table-column label="实收" prop="settlementFee" width="80"/>
                <ad-table-column label="渠道" prop="channel" width="80" dictName="finance_channel"/>
                <ad-table-column label="收款类型" prop="type" dictName="finance_type" width="80"/>
              </ad-table>
            </div>
            <div id="span8" class="right" :style="{'height':rightHeight,'position': 'relative'}">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>结算详情</h3>
              </div>
              <div class="op" style="position: absolute;top:3px;right:5px;">
                <el-button v-if="!isEditDraw" :disabled="isRightEdit" size="mini" type="primary" plain
                           @click="editDelivery">修改
                </el-button>
                <el-button v-else size="mini" type="primary" plain @click="deliverSave()">
                  保存
                </el-button>
                <el-button v-show="isEditDraw" size="mini" type="primary" plain @click="isEditDraw=false">
                  取消
                </el-button>
              </div>
              <el-descriptions :column="2" border size="mini" style="overflow: auto;">
                <el-descriptions-item label="操作时间">
                  <value :model="data" prop="createTime" style="width: 110px;max-width:110px;display: inline-block;"
                         type="datetime"/>
                </el-descriptions-item>
                <el-descriptions-item label="操作人">
                  <value :model="data" prop="createUser" style="display: inline-block;"/>
                </el-descriptions-item>
                <el-descriptions-item label="结算人">
                  <value :model="data" prop="settlementUser"/>
                </el-descriptions-item>
                <el-descriptions-item label="结算电话">
                  <value :model="data" prop="settlementPhone"/>
                </el-descriptions-item>
                <el-descriptions-item label="收款类型">
                  <value :model="data" prop="type" dictName="finance_type"/>
                </el-descriptions-item>
                <el-descriptions-item label="结算时间">
                  <el-date-picker
                      v-if="isEditDraw"
                      v-model="data.settlementTime"
                      type="datetime"
                      size="mini"
                      style="width: 120px;margin: -5px 0;"
                      value-format="timestamp" format="yyyy-MM-dd HH:mm"
                      placeholder="选择时间">
                  </el-date-picker>
                  <value v-else :model="data" prop="settlementTime" type="datetime"/>
                </el-descriptions-item>
                <el-descriptions-item label="实收金额">
                  <el-input-number :controls="false" v-if="isEditDraw" size="mini" maxLength="6"
                                   v-model="data.settlementFee"
                                   style="width:100px;margin: -5px 0;"/>
                  <value v-else :model="data" prop="settlementFee"/>
                </el-descriptions-item>
                <el-descriptions-item label="渠道">
                  <ad-status-select style="margin: -5px 0;width: 120px" size="mini" v-if="isEditDraw"
                                    v-model="data.channel"
                                    :dict="dict.finance_channel"/>
                  <value v-else :model="data" prop="channel" dictName="finance_channel"/>
                </el-descriptions-item>
                <el-descriptions-item label="付款凭证" :span="2">

                  <div v-show="data.imgList.length==0 && !isEditDraw" class="noImg">
                    暂无图片
                  </div>
                  <div v-show="data.imgList.length>0" style="line-height: 16px">
                    <el-image v-if="!isEditDraw" v-for="url in data.imgList" :key="url" :src="url"
                              style="width: 90px; height: 58px;margin-right: 10px;"
                              :preview-src-list="data.imgList"></el-image>
                  </div>
                  <ad-upload v-show="isEditDraw" ref="adimg" multiple v-model="data.imgList"
                             style="line-height: 16px"/>

                </el-descriptions-item>
                <el-descriptions-item label="备注">
                  <value :model="data" prop="remark"/>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
<!--      </el-drawer>-->
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import AdSuggestion from '@/components/AdSuggestion'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import adTable from '@/mixins/adTable'
  import Value from '@/components/AdValue'
  import api, {get as waitApiGetList} from '@/api/finance/receivable/wait';
  import AdUpload from '@/components/AdUpload'
  import noData from '@/assets/404_images/nodata.png';
  import SettlerManage from '@/components/SettlerManage';
  import DriverManage from '@/components/DriverManage'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdStatusSelectNoclear from '@/components/AdStatusSelect/noClear'
  import {
    getCompanyList as getSuggestCompanyList
  } from '@/api/suggestion'
  import {parseStatus} from '@/utils/code'
  import {download} from '@/api/data'
  import {downloadFile} from '@/utils/index'

  export default {
    name: 'finance-waitCollection',
    components: {
      AdTable,
      AdTableColumn,
      AdSuggestion,
      Value,
      AdUpload,
      AdStatusSelect,
      AdStatusSelectNoclear,
      SettlerManage,
      DriverManage
    },
    dicts: ["order_status", "finance_channel", "payment_type", "finance_type"],
    mixins: [adTable([
      {name: 'wait', pk: 'code'},
    ])],
    data() {
      return {
        drawer: false,
        noData,
        showBottom: true,
        rightHeight: 'calc(36vh - 0px)',
        leftHeight: 'calc(36vh - 36px)',
        isEditDraw: false,
        isRightEdit: true,
        deliverForm: {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: null,
          imgList: [], //交付凭证图
        },
        searchQuery: {
          beginSearchTime: null,
          endSearchTime: null,
          collectionStatus: 0
        },
        tableHeight: 440,
        bottomTabHeight: 300,
        deliverTableData: [],
        data: {},
        operates: {
          list: [
            {
              label: '撤销',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                if(row.origin==1||row.origin==2){
                  return true
                }else{
                  return false;
                }
              },
              method: (index, row) => {
                this.repeal(row, index);
              }
            }
          ]
        },
        imgList: []
      }
    },
    created() {
      let self = this;
      self.waitGetInitList()
      setTimeout(function () {
        self.tableHeight = document.documentElement.clientHeight - 160;
        // self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 145;
        self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
      })

      if (this.detectZoom() == 100) {
        this.rightHeight = 'calc(36vh - 0px)'
        this.leftHeight = 'calc(36vh - 36px)'
      }
      if (this.detectZoom() == 125) {
        this.rightHeight = 'calc(36vh + 18px)'
        this.leftHeight = 'calc(36vh - 16px)'
      }
    },
    methods: {
      waitApiGetList, parseStatus, getSuggestCompanyList,
      //导出
      exportExcel() {
        download(`api/finance/collection/download`, {...this.waitSearchQuery,...this.searchQuery}).then(res => {
          if(res.data.size){
            downloadFile(res.data, res.headers.downloadFileName, 'xlsx')
          }else{
            this.$message({
              message: '暂无数据',
              type: 'warning'
            })
          }
        })
      },
      getImgUrl: function (data) {
        let self = this;
        data.forEach(d => {
          if (d) {
            self.deliverForm.imgList.push(d)
          }
        })
        console.log(self.deliverForm.imgList)
      },
      detectZoom: function () {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      },
      //查询
      queryList: function () {
        let self = this;
        self.deliverTableData = [];
        self.showBottom = true;
        self.waitGetInitList()
      },
      clickSpotUn(row){
        console.log('clickSpotUn','现付未收')
        let self = this;
        self.showBottom = true;
        self.isEditDraw = false;
        self.isRightEdit = true;
        self.data = {
          createUser: null,
          createTime: null,
          origin: null,
          settlementFee: undefined,
          settlementPhone: null,
          settlementTime: null,
          settlementUser: null,
          type: null,
          channel: null,
          imgList: []
        };
        self.deliverForm = {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: row.orderId,
          imgList: [], //交付凭证图
        };
        api.gegSettlementRecord({orderId: row.orderId, cpType: 1}).then(res => {
          self.deliverTableData = res.data
          if (res.data.length > 0) {
            self.showBottom = false;
            self.getSettlementDetails(self.deliverTableData[0])
            setTimeout(function () {
              self.$refs.plTable.$refs.table.setCurrentRow(self.deliverTableData[0]);
            }, 200)
          }
        });
        if (Number(row.spotUn) != 0 && !!row.spotSettlementName) {
          self.showBottom = false;
          self.drawer = true;
          self.deliverForm = {
            channel: null,
            deliverySettlementName: row.spotSettlementName,
            deliverySettlementPhone: row.spotSettlementPhone,
            uncollected: row.spotUn,
            settlementFee: undefined,
            settlementTime: new Date().getTime(),
            type: 1,
            remark: null,
            orderId: row.orderId,
            imgList: [], //交付凭证图
          };
          self.$refs.proimg.images = [];
          self.$refs.proimg.imagesUrl = [];
        }
      },
      clickDeliveryUn(row){
        let self = this;
        self.showBottom = true;
        self.isEditDraw = false;
        self.isRightEdit = true;
        self.data = {
          createUser: null,
          createTime: null,
          origin: null,
          settlementFee: undefined,
          settlementPhone: null,
          settlementTime: null,
          settlementUser: null,
          type: null,
          channel: null,
          imgList: []
        };
        self.deliverForm = {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: row.orderId,
          imgList: [], //交付凭证图
        };
        api.gegSettlementRecord({orderId: row.orderId, cpType: 1}).then(res => {
          self.deliverTableData = res.data
          if (res.data.length > 0) {
            self.showBottom = false;
            self.getSettlementDetails(self.deliverTableData[0])
            setTimeout(function () {
              self.$refs.plTable.$refs.table.setCurrentRow(self.deliverTableData[0]);
            }, 200)
          }
        });
        if (Number(row.deliveryUn) != 0 && !!row.deliverySettlementName) {
          self.drawer = true;
          self.showBottom = false;
          self.deliverForm = {
            channel: null,
            deliverySettlementName: row.deliverySettlementName,
            deliverySettlementPhone: row.deliverySettlementPhone,
            uncollected: row.deliveryUn,
            settlementFee: undefined,
            settlementTime: new Date().getTime(),
            type: 2,
            remark: null,
            orderId: row.orderId,
            imgList: [], //交付凭证图
          };
          let img = [];
          setTimeout(function () {
            self.$refs.proimg.images = [];
            self.$refs.proimg.imagesUrl = [];
            if (row.hasTransferVoucher == 1) {
              //加载凭证 orderId
              api.getTransferVoucher(row.orderId).then(res => {
                res.data.forEach((d, i) => {
                  img.push({
                    name: d,
                    url: d
                  })
                })
                self.deliverForm.imgList = res.data
                self.$refs.proimg.images = img;
                self.$refs.proimg.imagesUrl = res.data;
              })
            }
          })
        }
        console.log('clickDeliveryUn','到付未收')
      },
      clickBackUn(row){
        console.log('clickBackUn','欠付未收')
        let self = this;
        self.showBottom = true;
        self.isEditDraw = false;
        self.isRightEdit = true;
        self.data = {
          createUser: null,
          createTime: null,
          origin: null,
          settlementFee: undefined,
          settlementPhone: null,
          settlementTime: null,
          settlementUser: null,
          type: null,
          channel: null,
          imgList: []
        };
        self.deliverForm = {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: row.orderId,
          imgList: [], //交付凭证图
        };
        api.gegSettlementRecord({orderId: row.orderId, cpType: 1}).then(res => {
          self.deliverTableData = res.data
          if (res.data.length > 0) {
            self.showBottom = false;
            self.getSettlementDetails(self.deliverTableData[0])
            setTimeout(function () {
              self.$refs.plTable.$refs.table.setCurrentRow(self.deliverTableData[0]);
            }, 200)
          }
        });
        if (Number(row.backUn) != 0 && !!row.backSettlementName) {
          self.drawer = true;
          self.showBottom = false;
          self.deliverForm = {
            channel: null,
            deliverySettlementName: row.backSettlementName,
            deliverySettlementPhone: row.backSettlementPhone,
            uncollected: row.backUn,
            settlementFee: undefined,
            settlementTime: new Date().getTime(),
            type: 3,
            remark: null,
            orderId: row.orderId,
            imgList: [], //交付凭证图
          };
          self.$refs.proimg.images = [];
          self.$refs.proimg.imagesUrl = [];
        }
      },
      clickSlotUn(row){
        console.log('clickSlotUn','月付未收')
        let self = this;
        self.showBottom = true;
        self.isEditDraw = false;
        self.isRightEdit = true;
        self.data = {
          createUser: null,
          createTime: null,
          origin: null,
          settlementFee: undefined,
          settlementPhone: null,
          settlementTime: null,
          settlementUser: null,
          type: null,
          channel: null,
          imgList: []
        };
        self.deliverForm = {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: row.orderId,
          imgList: [], //交付凭证图
        };
        api.gegSettlementRecord({orderId: row.orderId, cpType: 1}).then(res => {
          self.deliverTableData = res.data
          if (res.data.length > 0) {
            self.showBottom = false;
            self.getSettlementDetails(self.deliverTableData[0])
            setTimeout(function () {
              self.$refs.plTable.$refs.table.setCurrentRow(self.deliverTableData[0]);
            }, 200)
          }
        });
        if (Number(row.slotUn) != 0 && !!row.slotSettlementName) {
          self.drawer = true;
          self.showBottom = false;
          self.deliverForm = {
            channel: null,
            deliverySettlementName: row.slotSettlementName,
            deliverySettlementPhone: row.slotSettlementPhone,
            uncollected: row.slotUn,
            settlementFee: undefined,
            settlementTime: new Date().getTime(),
            type: 4,
            remark: null,
            orderId: row.orderId,
            imgList: [], //交付凭证图
          };
          self.$refs.proimg.images = [];
          self.$refs.proimg.imagesUrl = [];
        }
      },
      cellClick(row, column, event) {
        let self = this;
        self.showBottom = true;
        self.isEditDraw = false;
        self.isRightEdit = true;
        self.data = {
          createUser: null,
          createTime: null,
          origin: null,
          settlementFee: undefined,
          settlementPhone: null,
          settlementTime: null,
          settlementUser: null,
          type: null,
          channel: null,
          imgList: []
        };
        self.deliverForm = {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: new Date().getTime(),
          type: null,
          remark: null,
          orderId: row.orderId,
          imgList: [], //交付凭证图
        };
        api.gegSettlementRecord({orderId: row.orderId, cpType: 1}).then(res => {
          self.deliverTableData = res.data
          if (res.data.length > 0) {
            self.showBottom = false;
            self.drawer = true;
            self.getSettlementDetails(self.deliverTableData[0])
            setTimeout(function () {
              self.$refs.plTable.$refs.table.setCurrentRow(self.deliverTableData[0]);
            }, 200)
          }
        });

/*         switch (column.property) {
          // 现付 - 已收
          case 'spotHas':
            break
          // 现付 - 未收
          case 'spotUn':
      /!*       if (Number(row.spotUn) != 0 && !!row.spotSettlementName) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                deliverySettlementName: row.spotSettlementName,
                deliverySettlementPhone: row.spotSettlementPhone,
                uncollected: row.spotUn,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 1,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
              self.$refs.proimg.images = [];
              self.$refs.proimg.imagesUrl = [];
            } *!/
            break
          // 到付 - 已收
          case 'deliveryHas':
            break
          // 到付 - 未收
          case 'deliveryUn':
          /!*   if (Number(row.deliveryUn) != 0 && !!row.deliverySettlementName) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                deliverySettlementName: row.deliverySettlementName,
                deliverySettlementPhone: row.deliverySettlementPhone,
                uncollected: row.deliveryUn,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 2,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
              let img = [];
              setTimeout(function () {
                self.$refs.proimg.images = [];
                self.$refs.proimg.imagesUrl = [];
                if (row.hasTransferVoucher == 1) {
                  //加载凭证 orderId
                  api.getTransferVoucher(row.orderId).then(res => {
                    res.data.forEach((d, i) => {
                      img.push({
                        name: d,
                        url: d
                      })
                    })
                    self.deliverForm.imgList = res.data
                    self.$refs.proimg.images = img;
                    self.$refs.proimg.imagesUrl = res.data;
                  })
                }
              })
            } *!/
            break
          // 欠付 - 已收
          case 'backHas':
            break
          // 欠付 - 未收
          case 'backUn':
          /!*   if (Number(row.backUn) != 0 && !!row.backSettlementName) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                deliverySettlementName: row.backSettlementName,
                deliverySettlementPhone: row.backSettlementPhone,
                uncollected: row.backUn,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 3,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
              self.$refs.proimg.images = [];
              self.$refs.proimg.imagesUrl = [];
            } *!/
            break
          // 月付 - 已收
          case 'slotHas':
            break
          // 月付 - 未收
          case 'slotUn':
          /!*   if (Number(row.slotUn) != 0 && !!row.slotSettlementName) {
              self.showBottom = false;
              self.deliverForm = {
                channel: null,
                deliverySettlementName: row.slotSettlementName,
                deliverySettlementPhone: row.slotSettlementPhone,
                uncollected: row.slotUn,
                settlementFee: undefined,
                settlementTime: new Date().getTime(),
                type: 4,
                remark: null,
                orderId: row.orderId,
                imgList: [], //交付凭证图
              };
              self.$refs.proimg.images = [];
              self.$refs.proimg.imagesUrl = [];
            } *!/
            break
        } */
      },
      cellClickBottom(row, column, event) {
        let self = this;
        self.getSettlementDetails(row)
      },
      //查询结算详情
      getSettlementDetails: function (row) {
        let self = this;
        let images = [];
        if (row.origin == 0) {
          self.isRightEdit = false;
        } else {
          self.isRightEdit = true;
        }
        self.data = {...row};
        setTimeout(function () {
          if (self.data.imgList.length > 0) {
            self.data.imgList.forEach((d, i) => {
              images.push({
                name: d,
                url: d
              })
            })
            self.$refs.adimg.images = [];
            self.$refs.adimg.images = images;
          }
        })
      },
      //修改
      editDelivery: function () {
        let self = this;
        self.isEditDraw = true;
      },
      //撤销
      repeal(row, index) {
        let self = this;
        self.$confirm('是否确定撤销?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.revoke(row.id).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '撤销',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
            } else {
              self.$notify({
                title: '撤销',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });
      },
      //修改结算保存
      deliverSave: function () {
        let self = this;
        console.log(self.data)
        self.$confirm('是否确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.settlementSave(self.data).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
            } else {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });

      },
      save() {
        let self = this;
        let ajaxData = {};
        if (self.deliverForm.channel == '' || self.deliverForm.channel == null) {
          self.$notify({
            title: '提示',
            message: '请选择渠道',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (self.deliverForm.settlementTime == '' || self.deliverForm.settlementTime == null) {
          self.$notify({
            title: '提示',
            message: '请选择结算时间',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (self.deliverForm.imgList.length == 0) {
          self.$notify({
            title: '提示',
            message: '请上传付款凭证',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (self.deliverForm.settlementFee && Number(self.deliverForm.settlementFee) <= Number(self.deliverForm.uncollected)) {
          self.$confirm('是否确定保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            ajaxData = {...self.deliverForm};
            api.addSettlement(ajaxData).then(res => {
              if (res.code == 0) {
                self.$notify({
                  title: '保存',
                  message: res.msg,
                  position: 'bottom-right',
                  type: 'success'
                });
                self.queryList();
              } else {
                self.$notify({
                  title: '保存',
                  message: res.msg,
                  position: 'bottom-right',
                  type: 'error'
                });
              }
            })
          }).catch(() => {
          });
        } else {
          self.$notify({
            title: '提示',
            message: '请填写实收金额并且不能大于未收金额！',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;

    .box-style {
      display: flex;
      flex: 1;
      border: 1px solid #e3e3e3;
      flex-direction: column;
    }

    .top {
      display: flex;
      flex: 1;
      border-bottom: 1px solid #4da7fa;
      flex-direction: column;

      &:after {
        content: '';
        display: block;
        height: 4px;
        background: #4da7fa;
        opacity: 0.2;
      }

      .table-wrapper {
        flex: 1;
      }

      .table {
        flex: 1;
      }
    }

    .bottom {
      display: flex;
      height: 36vh;
      flex-direction: column;

      .title-bar {
        display: flex;
        line-height: 36px;
        background: #f5f5f5;
        border-bottom: 1px solid #e3e3e3;
        padding-left: 10px;
        flex-shrink: 0;

        .op {
          margin-left: auto;
          margin-right: 12px;
        }
      }

      .content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .left {
          display: flex;

          &:after {
            content: '';
            display: block;
            width: 3px;
            background: #4da7fa;
            opacity: 0.2;
          }
        }

        .middle {
          display: flex;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .table-wrapper {
            height: 100%;
          }
        }

        .form-wrapper {
          display: flex;
          flex: 1;
          flex-direction: column;
          width: 18vw;

          h3 {
            height: 35px;
            box-sizing: border-box;
          }

          .form-content {
            padding: 10px 10px 0 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .el-form-item {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      & > .title-bar {
        padding-left: 16px;
        border-bottom: 1px solid #bdd0e3;
        background: #f5f5f5;
        align-items: center;
      }

      h2 {
        font-size: 12px;
      }

      h3 {
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        background: #f5f5f5;
        line-height: 30px;
        font-size: 12px;
      }

      //.left h3 { border-right: 1px solid #e3e3e3; }
      //.middle h3 { border-left: 1px solid #e3e3e3; }
      .right {
        border-left: 1px solid #e3e3e3;
      }
    }
  }
  //::v-deep .ad-table.ad-table__u-table{
  //  height: 45px !important;
  //}
  ::v-deep .el-table__row {
    height: 55px !important;
  }
</style>